<template>
  <div class="feedback-info-container">
    <!-- 动态背景装饰 -->
    <div class="bg-decorations">
      <div class="circle-1"></div>
      <div class="circle-2"></div>
      <div class="circle-3"></div>
    </div>
    
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="back-btn" @click="goBack">
        <i class="fa fa-angle-left"></i>
      </div>
      <h1 class="nav-title">反馈任务详细信息</h1>
      <div class="decor-icon">
        <i class="fa fa-leaf"></i>
      </div>
    </div>
    
    <!-- 反馈信息卡片 -->
    <div class="info-card">
      <div class="info-item">
        <div class="item-icon">
          <i class="fa fa-user"></i>
        </div>
        <div class="item-content">
          <p class="item-title">反馈用户</p>
          <p class="item-value">
            {{aqiFeedback.supervisor.realName}} 
            {{aqiFeedback.supervisor.telId}} 
          </p>
        </div>
      </div>
      <div class="info-item">
        <div class="item-icon">
          <i class="fa fa-map-marker"></i>
        </div>
        <div class="item-content">
          <p class="item-title">所属网格</p>
          <p class="item-value">
            {{aqiFeedback.gridProvince.provinceName}} 
            {{aqiFeedback.gridCity.cityName}} 
          </p>
        </div>
      </div>
      <div class="info-item">
        <div class="item-icon">
          <i class="fa fa-map-pin"></i>
        </div>
        <div class="item-content">
          <p class="item-title">详细地址</p>
          <p class="item-value">{{aqiFeedback.address}}</p>
        </div>
      </div>
      <div class="info-item">
        <div class="item-icon">
          <i class="fa fa-tint"></i>
        </div>
        <div class="item-content">
          <p class="item-title">预估等级</p>
          <p class="item-value">
            {{aqiFeedback.aqi.chineseExplain}} 
            {{aqiFeedback.aqi.aqiExplain}} 
          </p>
        </div>
      </div>
      <div class="info-item">
        <div class="item-icon">
          <i class="fa fa-file-text"></i>
        </div>
        <div class="item-content">
          <p class="item-title">信息描述</p>
          <p class="item-value">{{aqiFeedback.information}}</p>
        </div>
      </div>
    </div>
    
    <!-- 实测数据录入区 -->
    <div class="actual-section">
      <div class="section-header">
        <h2>实测数据录入</h2>
        <div class="header-divider"></div>
      </div>
      
      <form class="actual-form">
        <!-- SO₂浓度 -->
        <div class="input-group">
          <div class="icon-wrap">
            <i class="fa fa-leaf"></i>
          </div>
          <input
            ref="so2InputRef"
            type="text"
            :value="so2ValueDisplay"
            @input="handleInput('so2', $event)"
            @focus="handleFocus('so2')"
            @blur="handleBlur('so2')"
            placeholder="请输入SO₂浓度"
            class="form-input"
          />
          <span class="unit">ug/m³</span>
          <div class="level-tag" :style="{backgroundColor: so2LevelObj.color}">
            {{so2LevelObj.chineseExplain}}
          </div>
        </div>
        
        <!-- CO浓度 -->
        <div class="input-group">
          <div class="icon-wrap">
            <i class="fa fa-fire"></i>
          </div>
          <input
            ref="coInputRef"
            type="text"
            :value="coValueDisplay"
            @input="handleInput('co', $event)"
            @focus="handleFocus('co')"
            @blur="handleBlur('co')"
            placeholder="请输入CO浓度"
            class="form-input"
          />
          <span class="unit">ug/m³</span>
          <div class="level-tag" :style="{backgroundColor: coLevelObj.color}">
            {{coLevelObj.chineseExplain}}
          </div>
        </div>
        
        <!-- PM2.5浓度 -->
        <div class="input-group">
          <div class="icon-wrap">
            <i class="fa fa-cloud"></i>
          </div>
          <input
            ref="spmInputRef"
            type="text"
            :value="spmValueDisplay"
            @input="handleInput('spm', $event)"
            @focus="handleFocus('spm')"
            @blur="handleBlur('spm')"
            placeholder="请输入PM2.5浓度"
            class="form-input"
          />
          <span class="unit">ug/m³</span>
          <div class="level-tag" :style="{backgroundColor: spmLevelObj.color}">
            {{spmLevelObj.chineseExplain}}
          </div>
        </div>
        
        <!-- 实测AQI等级展示 -->
        <div class="aqi-badge" :style="{backgroundColor: aqiObj.color}">
          实测AQI等级：{{aqiObj.chineseExplain}}级 {{aqiObj.aqiExplain}}
        </div>
        
        <!-- 提交按钮 -->
        <button class="submit-btn" @click.prevent="submitData">
          提交实测数据
        </button>
      </form>
    </div>
    
    <!-- 底部版权 -->
    <div class="footer-decor">
      <div class="gradient-mask"></div>
      <div class="copyright-text">
        © 2025 207集团股份有限公司 版权所有
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSessionStorage, getCurDate, getCurTime } from "../common.js";

const route = useRoute();
const router = useRouter();
const axios = inject("axios");
const gridMember = getSessionStorage("gridMember");

const aqiFeedback = ref({
  supervisor: {},
  gridProvince: {},
  gridCity: {},
  aqi: {},
  gridMember: {}
});

const so2InputRef = ref(null);
const coInputRef = ref(null);
const spmInputRef = ref(null);

// 实测数值
const so2Value = ref(null);
const coValue = ref(null);
const spmValue = ref(null);

// 显示与输入联动
const so2ValueDisplay = computed({
  get: () => so2Value.value === null ? '' : String(so2Value.value),
  set: v => { so2Value.value = v === '' ? null : parseFloat(v); }
});
const coValueDisplay = computed({
  get: () => coValue.value === null ? '' : String(coValue.value),
  set: v => { coValue.value = v === '' ? null : parseFloat(v); }
});
const spmValueDisplay = computed({
  get: () => spmValue.value === null ? '' : String(spmValue.value),
  set: v => { spmValue.value = v === '' ? null : parseFloat(v); }
});

const aqiArr = ref([]);

// 获取等级对象函数
const getLevel = (val, type) => {
  if (val === null || isNaN(val) || !aqiArr.value.length) return {
    aqiId: 0,
    color: "#ccc",
    chineseExplain: "—",
    aqiExplain: ""
  };

  const sorted = [...aqiArr.value].sort((a, b) => a.aqiId - b.aqiId);
  if (val < sorted[0][`${type}Min`]) return sorted[0];
  if (val > sorted[sorted.length - 1][`${type}Max`]) return sorted[sorted.length - 1];

  return sorted.find(item => val >= item[`${type}Min`] && val <= item[`${type}Max`]) || sorted[0];
};

// 等级计算
const so2LevelObj = computed(() => getLevel(so2Value.value, 'so2'));
const coLevelObj = computed(() => getLevel(coValue.value, 'co'));
const spmLevelObj = computed(() => getLevel(spmValue.value, 'spm'));

// 综合等级取 maxId
const aqiObj = computed(() => {
  const maxId = Math.max(
    so2LevelObj.value?.aqiId || 0,
    coLevelObj.value?.aqiId || 0,
    spmLevelObj.value?.aqiId || 0
  );
  return aqiArr.value.find(item => item.aqiId === maxId) || {
    aqiId: 0,
    color: "#ccc",
    chineseExplain: "—",
    aqiExplain: ""
  };
});

// 初始化
const init = () => {
  axios.post("aqiFeedback/getAqiFeedbackById", { afId: route.query.afId })
    .then(res => {
      aqiFeedback.value = res.data;

      // 回填实测值
      if (res.data.so2Value !== undefined) so2Value.value = res.data.so2Value;
      if (res.data.coValue !== undefined) coValue.value = res.data.coValue;
      if (res.data.spmValue !== undefined) spmValue.value = res.data.spmValue;
    }).catch(console.error);

  axios.get("aqi/listAqiAll")
    .then(res => {
      if (res.data.code === 6000 && Array.isArray(res.data.t)) {
        aqiArr.value = res.data.t;
      }
    }).catch(console.error);
};

onMounted(() => {
  init();
  document.addEventListener("touchstart", () => {}, { passive: true });
});

// 输入事件处理
const handleInput = (type, e) => {
  let value = e.target.value.replace(/[^0-9.]/g, "");
  if (value.includes(".")) {
    const parts = value.split(".");
    if (parts.length > 2 || parts[0] === "") {
      value = parts[0];
    }
  }
  if (type === "so2") so2ValueDisplay.value = value;
  if (type === "co") coValueDisplay.value = value;
  if (type === "spm") spmValueDisplay.value = value;
};

// 聚焦、失焦
const handleFocus = type => {
  if (type === "so2") so2InputRef.value?.select();
  if (type === "co") coInputRef.value?.select();
  if (type === "spm") spmInputRef.value?.select();
};
const handleBlur = type => {
  if (type === "so2" && so2ValueDisplay.value === "") so2Value.value = null;
  if (type === "co" && coValueDisplay.value === "") coValue.value = null;
  if (type === "spm" && spmValueDisplay.value === "") spmValue.value = null;
};

// 提交数据
const submitData = () => {
  if (
    so2Value.value === null ||
    coValue.value === null ||
    spmValue.value === null ||
    isNaN(so2Value.value) ||
    isNaN(coValue.value) ||
    isNaN(spmValue.value)
  ) {
    alert("请填写完整有效的实测数值！");
    return;
  }

  if (!confirm("确认提交？提交后不可修改")) return;

  const param = {
    provinceId: aqiFeedback.value.provinceId,
    cityId: aqiFeedback.value.cityId,
    address: aqiFeedback.value.address,
    so2Value: so2Value.value,
    so2Level: so2LevelObj.value.aqiId,
    coValue: coValue.value,
    coLevel: coLevelObj.value.aqiId,
    spmValue: spmValue.value,
    spmLevel: spmLevelObj.value.aqiId,
    aqiId: aqiObj.value.aqiId,
    confirmDate: getCurDate(),
    confirmTime: getCurTime(),
    gmId: gridMember.gmId,
    fdId: aqiFeedback.value.telId,
    information: aqiFeedback.value.information
  };

  axios.post("statistics/saveStatistics", param)
    .then(res => {
      if (res.data === 1) {
        updateStateAndRedirect();
      } else {
        alert("提交失败！");
      }
    })
    .catch(error => {
      console.error("提交错误：", error);
      alert("提交过程中发生错误");
    });
};

// 更新状态并跳转
const updateStateAndRedirect = () => {
  axios.post("aqiFeedback/updateAqiFeedbackState", {
    afId: aqiFeedback.value.afId,
    state: 2
  }).then(res => {
    if (res.data !== 1) alert("状态更新失败！");
    router.push("/feedbackList");
  }).catch(err => {
    console.error("状态更新错误：", err);
    alert("状态更新过程中发生错误");
  });
};

// 返回
const goBack = () => history.go(-1);
</script>


<style scoped>
/* 全局布局 */
.feedback-info-container {
  width: 100vw;
  min-height: 100vh;
  background: #F5FAFF;
  font-size: 4vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景装饰 */
.bg-decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.circle-1, .circle-2, .circle-3 {
  position: absolute;
  border-radius: 50%;
  animation: float 15s ease-in-out infinite;
  opacity: 0.1;
}
.circle-1 {
  top: -100px; right: -100px;
  width: 200px; height: 200px;
  background: #0A66C2;
}
.circle-2 {
  bottom: -150px; left: -150px;
  width: 300px; height: 300px;
  background: #26D0CE;
  animation-duration: 20s;
}
.circle-3 {
  top: 30%; left: -50px;
  width: 100px; height: 100px;
  background: #0A66C2;
  animation-duration: 12s;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0); }
}

/* 顶部导航 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12vw;
  background: linear-gradient(90deg, #0A66C2, #26D0CE);
  padding: 0 4vw;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}
.top-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.back-btn {
  font-size: 6vw;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.back-btn:hover { transform: scale(1.2); }
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 5vw;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.decor-icon {
  font-size: 5vw;
  color: rgba(255,255,255,0.6);
}

/* 反馈信息卡片 */
.info-card {
  margin: 4vw;
  background: #fff;
  border-radius: 3vw;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.info-item {
  display: flex;
  align-items: center;
  padding: 3vw;
  border-bottom: 1px dashed #eee;
}
.info-item:last-child { border-bottom: none; }
.item-icon {
  width: 8vw; height: 8vw;
  border-radius: 50%;
  background: linear-gradient(135deg, #0A66C2, #26D0CE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 4vw;
  margin-right: 3vw;
}
.item-content { flex: 1; }
.item-title {
  font-size: 4vw;
  color: #1A2980;
  font-weight: 600;
  margin-bottom: 1vw;
}
.item-value {
  font-size: 3.6vw;
  color: #666;
}

/* 实测数据区 */
.actual-section {
  margin: 0 4vw 8vw;
  background: #fff;
  border-radius: 3vw;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.section-header {
  display: flex;
  align-items: center;
  padding: 4vw;
  border-bottom: 1px dashed #eee;
}
.section-header h2 {
  font-size: 5vw;
  color: #1A2980;
  font-weight: 600;
  margin-right: 2vw;
}
.header-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #CADFF3, transparent);
}

.actual-form { padding: 4vw; }
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}
.icon-wrap {
  width: 6vw; height: 6vw;
  border-radius: 50%;
  background: linear-gradient(135deg, #0A66C2, #26D0CE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.5vw;
  margin-right: 2vw;
}

/* 输入框样式 */
.form-input {
  flex: 1;
  height: 8vw;
  border: 1px solid #CADFF3;
  border-radius: 4vw;
  padding: 0 3vw;
  font-size: 3.6vw;
  outline: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1; /* 确保输入框在最上层 */
}

.form-input:focus {
  border-color: #26D0CE;
  box-shadow: 0 0 0 2px rgba(38, 208, 206, 0.2);
}

.unit {
  margin: 0 2vw;
  color: #666;
  font-size: 3.6vw;
}
.level-tag {
  padding: 1vw 3vw;
  border-radius: 2vw;
  color: #fff;
  font-size: 3.6vw;
  font-weight: 600;
  white-space: nowrap;
}

.aqi-badge {
  margin: 3vw 0;
  padding: 3vw;
  text-align: center;
  color: #fff;
  font-size: 4vw;
  font-weight: 600;
  border-radius: 2vw;
  transition: background-color 0.3s ease;
}

.submit-btn {
  width: 100%;
  height: 10vw;
  background: linear-gradient(135deg, #0A66C2, #26D0CE);
  border: none;
  border-radius: 5vw;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shine 2s infinite;
}
@keyframes shine {
  0% { left: -100%; }
  20% { left: 100%; }
  100% { left: 100%; }
}
.submit-btn:hover {
  background: linear-gradient(135deg, #0856A3, #23C0BE);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10,102,194,0.2);
}

/* 底部版权 */
.footer-decor {
  margin-top: auto;
  background: linear-gradient(to top, #0A66C2 0%, transparent 100%);
  padding-top: 5vw;
}
.gradient-mask {
  height: 10vw;
  background: linear-gradient(to top, rgba(10,102,194,0.15), transparent);
}
.copyright-text {
  text-align: center;
  padding: 3vw 0;
  font-size: 3.5vw;
  color: #606E88;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

/* 桌面端响应式适配 */
@media (min-width: 768px) {
  .feedback-info-container {
    font-size: 16px;
    max-width: 768px;
    margin: 0 auto;
  }
  .top-nav {
    height: 80px;
    padding: 0 30px;
  }
  .back-btn { font-size: 36px; }
  .nav-title { font-size: 24px; }
  .decor-icon { font-size: 28px; }
  
  .info-card {
    margin: 20px;
    border-radius: 12px;
  }
  .info-item {
    padding: 20px;
  }
  .item-icon {
    width: 50px; height: 50px;
    font-size: 24px;
    margin-right: 20px;
  }
  .item-title { font-size: 20px; }
  .item-value { font-size: 16px; }
  
  .actual-section {
    margin: 0 20px 40px;
    border-radius: 12px;
  }
  .section-header {
    padding: 20px;
  }
  .section-header h2 { font-size: 24px; }
  .actual-form { padding: 20px; }
  
  .input-group {
    margin-bottom: 20px;
  }
  .icon-wrap {
    width: 40px; height: 40px;
    font-size: 18px;
    margin-right: 10px;
  }
  .form-input {
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    padding: 0 15px;
  }
  .unit {
    margin: 0 10px;
    font-size: 16px;
  }
  .level-tag {
    padding: 5px 15px;
    font-size: 16px;
    border-radius: 10px;
  }
  
  .aqi-badge {
    margin: 15px 0;
    padding: 15px;
    font-size: 18px;
    border-radius: 10px;
  }
  
  .submit-btn {
    height: 50px;
    font-size: 18px;
    border-radius: 25px;
  }
  
  .footer-decor {
    padding-top: 20px;
  }
  .gradient-mask { height: 50px; }
  .copyright-text {
    padding: 20px 0;
    font-size: 14px;
  }
}
</style>